<template>
    <div id="div1">
      <div class="logo">
          <el-image
            src="../../../static/images/logosl.png"
            style="width: 200px;height: 50px;"
          ></el-image>
      </div>
      <video autoplay loop muted>
        <source src="../../../static/videos/5s.mp4" type="video/mp4"  />
      </video>

      <div id="div2" style="text-align: center;">
        <el-image
          src="../../../static/images/slogn.png"
        ></el-image>
<!--        <div ><el-tag color="none" style="width: 135px;height: 50px;font-size: 36px;font-weight: 1;line-height: 50px;text-align: center;">登陆</el-tag></div>-->
        <el-input class="nl" :style="inputStyle" size="large" prefix-icon="el-icon-user-solid" v-model="account" placeholder="请输入账号"></el-input>
        <el-input class="nl" :style="inputStyle" size="large" v-model="psd" prefix-icon="el-icon-coordinate" placeholder="请输入密码" show-password></el-input>
        <br>
        <el-button :style="buttonStyle1" type="success" icon="el-icon-right" circle @click="show"></el-button>
        <el-button :style="buttonStyle2" type="success" icon="el-icon-right" circle @click="login"></el-button>
        <el-button :style="buttonStyle2" type="success"  circle @click="logint">test</el-button>
<!--        <el-button style="margin-top: 15px" size="large" @click="login">登录</el-button>-->

      </div>




    </div>
</template>

<script>



    export default {
        name: "Login",
        data: function(){
          return {
            account: '',
            psd: '',
            inputStyle: 'margin-top: 15px;width: 280px;display: none',
            buttonStyle2: 'margin-top: 15px;width: 45px;height: 45px;display: none',
            buttonStyle1: 'margin-top: 15px;width: 45px;height: 45px;',
            mes:''
          }
        },
        methods: {
          login: function () {
            if(this.account){
              if(this.psd){
                let data = {
                  "loginName": this.account,
                  "password": this.psd
                }
                //向后端发送Axios请求
                this.axios.post("micro-sys-server/sys/login","loginName="+this.account+"&password="+this.psd,).then(res => {
                  if(res.data.code == 200){
                    localStorage.setItem("admin",JSON.stringify(res.data.data.admin))
                    localStorage.setItem("token",res.data.data.token)
                    //webSocket发送登录消息
                    if(res.data.data.admin.id != 1 || res.data.data.admin.id != 2 ){
                      this.axios.post("micro-sys-server/sys/send",this.$qs.stringify({id:res.data.data.admin.id}))
                    }
                    //消息队列发送登录消息
                    let log = {
                      id: res.data.data.admin.id,
                      routeKey: "login"
                    }
                    this.axios.post("micro-sys-server/rabbit/login",this.$qs.stringify(log))
                    this.$router.push('/main/home') //登录成功，跳转到主页
                    // console.log(res.data.data.admin)
                  }else {
                    this.$notify.error({
                      title: 'failed',
                      message: res.data.message
                    });
                  }
                });
              }else {
                this.$notify({
                  title: 'failed',
                  message: "Please fill in the password",
                  type: 'warning',
                  showClose: false,
                });
              }
            }else {
              this.$notify({
                title: 'failed',
                message: "Please fill in the account",
                type: 'warning',
                showClose: false
              });
            }


            // this.$router.push('/main/home') //登录成功，跳转到主页
          },
          show(){
            this.inputStyle = 'margin-top: 15px;width: 280px;'
            this.buttonStyle2 = 'margin-top: 15px;width: 45px;height: 45px;'
            this.buttonStyle1 = 'margin-top: 15px;width: 45px;height: 45px;display: none'
          },
          logint(){
            this.$router.push('/main/home') //登录成功，跳转到主页
          }
        }
    }
</script>

<style scoped>

  video{
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    height: auto;
    width: auto;
    z-index:-999;
  }

  div{
    margin: 0 auto;
  }

  #div2{
    margin-top: 120px;
    width: 400px;
  }



</style>
